<script setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import {getExamResult} from '@/api/index';
const route = useRoute();
const pathParams = route.params;
const pathId = ref(null);
pathId.value = pathParams.id;
const typeMap = ref({
  0: '单选题',
  1: '多选题',
  2: '判断题'
})
const resultData = ref('');
const getExamResultData = async() => {
  resultData.value = (await getExamResult(pathId.value)).data
  console.log(resultData.value)
}

onMounted(() => {
  getExamResultData();
})
const show = ref(false);
const currDesc = ref({
  id: ''
});
const showMore = (item,index) => {
  show.value = true;
  currDesc.value = item;
  currDesc.value.id = index;
}
</script>
<template>
  <div class="res-head">
    <div class="head-title">
      <p>恭喜您完成<span style="font-weight: bold;">“{{ resultData.groupName }}”</span>考试！</p>
      <van-button size="small" type="primary" to="/">返回首页</van-button>
    </div>
    <p>最终得分：<span style="font-weight: bold;">{{ resultData.examScores }}</span></p>
    <div class="sign-box">明细：
      <p><span class="right"></span>答对{{ resultData.successNum }}题</p>
      <p><span class="wrong"></span>答错{{ resultData.errorNum }}题</p>
      <p><span class="none"></span>未答{{ resultData.unansweredNum }}题</p></div>
      <ul class="examIndexs">
        <template v-for="(item,index) in resultData.questionList" :key="index">
          <li v-if="item.answerResult === '0'" class="right" @click="showMore(item,index)">{{index+1}}</li>
          <li v-else-if="item.answerResult === '1'" class="wrong" @click="showMore(item,index)">{{index+1}}</li>
          <li v-else @click="showMore(item,index)">{{index+1}}</li>
        </template>
      </ul>
  </div>
  
  <van-action-sheet v-model:show="show" title="本题详情">
    <div style="padding:0 1rem;">
          <!-- 选项列表 -->
          <div class="que-one">
            <p><van-tag :color="currDesc.questionType === '0' ? '#67C23A' : '#E6A23C'">{{ typeMap[currDesc.questionType]
                }}</van-tag>&nbsp; {{ currDesc.id+1 }}、{{ currDesc.questionContent }}</p>
            <ul>
              <template v-for="(item2, i) in currDesc.answerOptions" :key="i">
                <li v-if="item2.choose" class="active">
                  <span>{{ item2.label }}</span>
                </li>
                <li v-else>
                  <span>{{ item2.label }}</span>
                </li>
              </template>
            </ul>
          </div>
          <!-- 显示正确答案 -->
          <div>
            <div>正确答案：
              <p v-for="(obj, index) in currDesc.answerOptions" :key="index">
                <span v-if="obj.rightAnswer">{{ obj.label }}</span>
              </p>
            </div>
            <p>解析：参与书《{{ currDesc.refBook }}》，{{ currDesc.refLevel2 }}--{{ currDesc.refLevel3 }}--{{ currDesc.refLevel1 }}</p>
            <p>详情：{{ currDesc.refContent }}</p>
          </div>
        </div>
  </van-action-sheet>
</template>

<style lang="scss" scoped>
.res-head{
  padding: 1rem;
  p{
    padding: .5rem 0;
  }
  .head-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .sign-box{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .5rem 0;
    p{
      display: flex;
      align-items: center;
      padding: 0 .5rem;
      span{
        display:inline-block;
        width: 1rem;
        height: 1rem;
        border-radius: 2px;
        border: 1px solid;
        margin-right: .5rem;
        &.right{
          background-color: #07c160;
          border-color: #07c160;
        }
        &.wrong{
          background-color: #ee0a24;
          border-color: #ee0a24;
        }
        &.none{
          background-color: #fff;
          border-color: #C0C4CC;
        }
      }
    }
  }
}
.examIndexs{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  li{
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #C0C4CC;
    border-radius: 50%;
    margin: .5rem;
    transition: all .3s;
    &.right{
      color: #fff;
      background-color: #07c160;
      border-color: #07c160;
    }
    &.wrong{
      color: #fff;
      background-color: #ee0a24;
      border-color: #ee0a24;
    }
  }
}
.que-one {
  ul {
    padding: 1rem;
    color: #58727e;
    li {
      padding: .5rem;
      margin-bottom: .5rem;
      background-color: #FAFCFF;
      border-radius: 6px;
      transition: all .3s;
      &.active{
        background-color: #C0C4CC;
        color: #fff;
      }
    }
  }
}
</style>